<script>

  $(function() {
	  $('#step-2').hide();
	  $('#step-3').hide();
	  $('#step-4').hide();
	  var progressbar = $( "#progressbar" ),
	  progressLabel = $( ".progress-label" );
      progressbar.progressbar({
        value: 0,
        max: 3,
        change: function() {
            progressLabel.text( "Completed " + progressbar.progressbar( "value" ) + " of 3 steps" );
        }
      });
  });
  function nextStep(step) {
  	  $('#step-1').hide();
  	  $('#step-2').hide();
  	  $('#step-3').hide();
  	  $('#step-4').hide();
  	  $('#step-' + step).show();
  	  $( "#progressbar" ).progressbar( "value", (step - 1) );
    }
  </script>
<h1>Registration</h1>
<p>
	<div id="progressbar"><div class="progress-label">Completed 0 of 3 steps</div></div>
</p>
<div id="step-1">
<h3>Account information</h3>
<form action="{$smarty.const.WEBROOT}/?action=registerAccount" method="POST"
	id="registerAccount">
	<table class="regTbl" cellspacing="0">
		<tr><td>Name:</td><td><input type="text" class="feedbackInput inputHeight inputWidth" id="name" name="name"/></td></tr>
		<tr><td>Password:</td><td><input type="password" class="feedbackInput inputHeight inputWidth" id="password" name="password"/></td></tr>
		<tr><td>Re-type password:</td><td><input type="password" class="feedbackInput inputHeight inputWidth" id="r_password" name="r_password"/></td></tr>
		<tr><td>Email:</td><td><input type="text" class="feedbackInput inputHeight inputWidth" id="email" name="email"/></td></tr>
		<tr><td>Phone nr:</td><td><input type="text" class="feedbackInput inputHeight inputWidth" id="phone" name="phone"/></td></tr>
		<tr><td colspan="2"><input type="checkbox"/> Agree to the <a href="#">terms of service</a></td></tr>
	</table>
</form>
	<div class="clearfix"></div>
	<br>
	<p class="readmore">
		<a href="#" onclick="nextStep(2)">Next</a> »
	</p>
</div>

<div id="step-2">
<h3>Business information</h3>
<form action="{$smarty.const.WEBROOT}/?action=registerBusiness" method="POST"
	id="registerBusiness">
	<table class="regTbl" cellspacing="0">
		<tr><td>Name of the business:</td><td><input type="text" class="feedbackInput inputHeight inputWidth" id="name" name="name"/></td></tr>
		<tr><td>Category:</td><td><select class="feedbackInput inputHeight inputWidth"><option>Restautants</option></select></td></tr>
		<tr><td>Description:</td><td><textarea class="feedbackInput textareaHeight inputWidth" id="description" name="description"> </textarea></td></tr>
		<tr><td>Image:</td><td><input type="text" class="feedbackInput inputHeight inputWidth" id="imgurl" name="imgurl"/></td></tr>
		<tr><td colspan="2"><input type="checkbox"/> Notify about new comments</td></tr>
	</table>
</form> 
	<div class="clearfix"></div>
	<br>
	<p class="readmore">
		<a href="#" onclick="nextStep(3)">Next</a> »
	</p>
</div>

<div id="step-3">
<p class="box">Note that first month is FREE, when free period expires, wee will send You an invoice. If You decide not to use our services after 
the free trial, just do not pay the invoice and Your account will be closed automatically! However, if You decide to pay, Your account will remain
active and we'll send another invoice on a monthly basis!</p>
<h3>Contract information</h3>
<form action="{$smarty.const.WEBROOT}/?action=registerContract" method="POST"
	id="registerContract">
	<table class="regTbl" cellspacing="0">
		<tr><td>Billing name:</td><td><input type="text" class="feedbackInput inputHeight inputWidth"</td></tr>
		<tr><td>Billing address:</td><td><input type="text" class="feedbackInput inputHeight inputWidth"/></td></tr>
		<tr><td>VAT code?:</td><td><input type="text" class="feedbackInput inputHeight inputWidth"/></td></tr>
	</table>
</form>
	<div class="clearfix"></div>
	<br>
	<p class="readmore">
		<a href="#" onclick="nextStep(4)">Next</a> »
	</p>
</div>

<div id="step-4">
<h2>Thank You</h2>
<p>Thank you for registering! Your account information is as follows:</p>
	<table class="feedbackTbl" cellspacing="0">
		<tr><td>Name</td><td>"nimi"</td></tr>
		<tr><td>Email</td><td>"email"</td></tr>
		<tr><td>Phone</td><td>"telefon"</td></tr>
		<tr><td>Business</td><td>"ettevõte"</td></tr>
		<tr><td>Description</td><td>"kirjeldus"</td></tr>
	</table>
	<div class="clearfix"></div>
	<br>
	<p class="readmore">
		<a href="#" onclick="$('#progressbar').progressbar('value', 3 )">Confirm</a> »
	</p>
</div>
